<template>
    <div class="card" @keyup.enter="register()">
        <div class="login-card">
            <h2>用户注册</h2>
            <div class="input-card">
                <span>用户名:</span>
                <el-input class="input" placeholder="请输入用户名" v-model="user.username" clearable ref="username">
                </el-input>
            </div>

            <div class="input-card">
                <span>昵称:</span>
                <el-input class="input" placeholder="请输入昵称" v-model="user.nickname" clearable ref="nickname">
                </el-input>
            </div>

            <div class="input-card">
                <span>密码:</span>
                <el-input class="input" placeholder="请输入密码" v-model="user.password" show-password ref="password"></el-input>
            </div>

            <div class="input-card">
                <span>确认密码:</span>
                <el-input class="input" placeholder="请输入确认密码" v-model="password2" show-password ref="password2"></el-input>
            </div>

            <div class="other">
                <el-switch v-model="agree" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
                <span :class="agree ? 'green' : 'red'">同意</span>
                <el-link type="primary">"小贴吧"使用条款和隐私权限</el-link>
            </div>

            <div class="button">
                <el-button class="submit" type="primary" @click="register()">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import instance from '../utils/request'

export default {
    name: "Register",
    data() {
        return {
            user: {},
            password2: '', //确认密码
            agree: true //是否同意条款
        }
    },
    methods: {
        /**
         * 注册
         */
        register() {
            //1.非空校验
            if (this.user.username == null || this.user.username == '') {
                Message.warning("用户名不能为空！");
                this.$refs.username.focus();
                return;
            }
            if (this.user.nickname == null || this.user.nickname == '') {
                Message.warning("昵称不能为空！");
                this.$refs.nickname.focus();
                return;
            }
            if (this.user.password == null || this.user.password == '') {
                Message.warning("密码不能为空！");
                this.$refs.password.focus();
                return;
            }
            if (this.password2 == null || this.password2 == '') {
                Message.warning("确认密码不能为空！");
                this.$refs.password2.focus();
                return;
            }
            if (this.user.password != this.password2) {
                Message.warning("两次输入密码不一致，请重试！");
                this.$refs.password.focus();
                return;
            }
            if (!this.agree) {
                Message.warning("根据法律规定，请遵守条款！");
                return;
            }
            //2.发送注册请求
            instance.post("/user/reg", this.user).then(success => {
                if (success.data.code == 10000) {
                    Message.success("注册成功，快来登录吧~");
                    this.$router.push({ name: "Login" });
                } else if (success.data.code == 11004) {
                    Message.warning("用户名已存在，换一个试试呗~");
                } else {
                    console.log(success.data.msg);
                    Message.warning("注册失败，请稍后重试！");
                }
            }).catch(error => {
                console.log(error);
                Message.warning("服务器异常，请稍后重试！");
            });
        }
    }

}
</script>

<style scoped>
.card {
    width: 550px;
    height: 450px;
    margin: 40px auto;
    padding: 20px;
}

.login-card {
    width: 500px;
    height: auto;
    background-color: white;
    padding: 40px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}


.login-card h2 {
    width: 100px;
    height: 60px;
    margin: 0px auto;
}

.input-card {
    display: flex;
    justify-content: left;
    align-items: center;
}

.input-card span {
    display: block;
    width: 80px;
    padding: 20px 0px;
}

.login-card .input {
    width: 300px;
}

.button {
    width: 300px;
    margin: 20px auto;
}

.login-card .submit {
    width: 300px;
}

.other {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 10px 0;
}

.other span {
    padding: 0 10px;
}

.other .red {
    color: red;
}

.other .green {
    color: rgb(19, 206, 102);
}
</style>